<template>
  <!-- 日历插件 -->
  <div class="calendar">
    <van-cell :value="date"
              @click="show = true" />
    <van-calendar v-model="show"
                  type="range"
                  @confirm="onConfirm" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      date: '',
      show: true,
    };
  },
  methods: {
    formatDate (date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm (date) {
      const [start, end] = date;
      this.show = false;
      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
      this.$router.go(-1)
    },
  },
};
</script>

<style>
</style>